<template>
    <div class="enter-choose-view">
        <mt-header fixed title="跟随者" class="mt-header">
            <router-link to="/enter" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
        </mt-header>
        
        <div class="content-page">
            <h3>选择经纪商开户：</h3>
            <div class="account-list">
                <div class="account-item" v-for="item in accountList">
                    <!-- <router-link :to="'/enter-open/'+item.id" info="item"> -->
                    <router-link :to="{path: '/enter-open/'+item.id, query: {accountInfo: item}}" info="item">
                        <img :src="item.img" alt="">
                        <ul>
                            <li v-for="advItem in item.adv">{{advItem}}</li>
                        </ul>
                    </router-link>
                    
                </div>
            </div>

            
        </div>

        <my-footer></my-footer>
    </div>
</template>

<script>
    import { mapState } from 'vuex'
    export default {
        name: 'EnterChooseView',
        data(){
            return {
                isChoosed: false,
                accountList: [{
                    id: '001',
                    name: '昆仑国际1',
                    img: 'http://oz1lum573.bkt.clouddn.com/c-jimmy/180224/F9DCI6ffB9.png',
                    adv: ['交易工具：MT4、Followme','单笔最低入金$100','入金满$5000激活账户'],
                    logo: 'http://oz1lum573.bkt.clouddn.com/c-jimmy/180224/F9DCI6ffB9.png',
                    href: 'http://www.baidu.com'
                },{
                    id: '002',
                    name: '昆仑国际2',
                    img: 'http://oz1lum573.bkt.clouddn.com/c-jimmy/180224/F9DCI6ffB9.png',
                    adv: ['交易工具：MT4、Followme','单笔最低入金$100','入金满$5000激活账户'],
                    href: ''
                },{
                    id: '003',
                    name: '寰球国际3',
                    img: 'http://oz1lum573.bkt.clouddn.com/c-jimmy/180224/025fhD817j.png',
                    adv: ['交易工具：MT4、Followme','单笔最低入金$100','入金满$5000激活账户'],
                    logo: '',
                    href: ''
                },{
                    id: '004',
                    name: '福汇国际4',
                    img: 'http://oz1lum573.bkt.clouddn.com/c-jimmy/180224/5i0EfeHcmL.png',
                    adv: ['交易工具：MT4、Followme','单笔最低入金$100','入金满$5000激活账户'],
                    logo: '',
                    href: ''
                }]
            }
        }
    }
</script>

<style scoped>
    .enter-choose-view{
        padding: 40px 15px 60px 15px;
        text-align: left;
    }
    .mt-header {
        background: #fff;
        color: #666;
        border-bottom: 1px solid #FFF54C;
    }
    .spacing {
        height: 10px;
        background: #eee;
        margin: -1px -15px 0 -15px;
    }
    .content-page p{
        font-size: 13px;
        line-height: 24px;
        text-indent: 2rem;
        color: #666;
    }
    .content-page h3 {
        margin: 8px 0 0 0;
        font-size: 16px;
        font-weight: inherit;
        padding-left: 5px;
        color: #666;
    }
    .account-list {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
    }
    .content-page .account-item {
        padding-top: 15px;
        height: 180px;
        width: 46%;
        margin: 10px 0;
        border: 1px solid #eee;
        border-radius: 5px;
        overflow: hidden;
    }
    .content-page .account-item a {
        text-decoration: none;
        display: block;
        height: 100%;
    }
    .content-page .account-item img {
        width: 140px;
        height: 40px;
        padding-left: 5px;
        margin: 0 auto;
    }
    .content-page .account-item ul {
        list-style-type: none;
        padding-left: 5px;
    }
    .content-page .account-item li {
        /*list-style: none;*/
        font-size: 12px;
        line-height: 20px;
        color: #777;
    }

</style>